<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cLodop打印测试</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css">
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
</head>
<body>
    <div id="container" v-cloak>
      <el-input
        type="textarea"
        :rows="24"
        placeholder=""
        v-model="printHtml">
      </el-input>
      <el-radio v-model="radio" label="1">预览</el-radio>
      <el-radio v-model="radio" label="2">打印</el-radio>
      <el-select v-model="printer" placeholder="请选择打印机">
        <el-option
          v-for="item in printerList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" @click="handlePrint">打印</el-button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>
        <script type="module">
          
            import CLodopPrintClass from './cLodopPrintHelp.js';
            import CLodopFuncs from './cLodopPrintFuncs.js';
           new Vue({
             el: '#container',
             data:{
                radio: '1',
                printer: '',
                printerList: [],
                printHtml:`<div class="picking-title" style="margin-top: 10px; margin-bottom: 8px;"><span style="font-size: 36px;">配货单</span></div><ul class="picking-buyer-ul"><li data-component="10211">主订单数：1</li><li data-component="10212">商品总数：1</li><li data-component="10213">商品SKU种类数：1</li><li data-component="10214" class="picking-full-li">交易时间：2021-02-26 14:13 —— 2021-02-26 14:13</li></ul><div class="picking-item-panel"><table style="width: 100%;"><thead><tr><th class="show" style="width: 4%; text-align: center;"></th><th class="show " data-component="10201" style="width: 24%; text-align: center;">宝贝名称</th><th class="show" data-component="10202" style="width: 14%; text-align: center;">商家编码</th><th class="show " data-component="10203" style="width: 12%; text-align: left;">宝贝图片</th><th class="show" data-component="10204" style="width: 18%; text-align: center;">规格</th><th class="show" data-component="10205" style="width: 8%; text-align: left;">数量</th><th class="show " data-component="10206" style="width: 10%; text-align: center;">宝贝货号</th><th class="show " data-component="10207" style="width: 10%; text-align: right;">宝贝单价</th></tr></thead><tbody><tr style="border-top: 0px solid rgb(158, 158, 158);"><td class="show" rowspan="1" style="text-align: center; height: 40px; border-top: 1px solid rgb(158, 158, 158);">1</td><td class="show " rowspan="1" style="text-align: left; border-top: 1px solid rgb(158, 158, 158);">测试宝贝勿拍坎坎坷坷咔咔咔咔咔咔</td><td class="show" style="text-align: left; border-top: 1px solid rgb(158, 158, 158);">1CN3J7W8V3</td><td class="show " style="text-align: left; border-top: 1px solid rgb(158, 158, 158);"><img class="picking-item-img" src="https://img.alicdn.com/bao/uploaded/i1/3846006565/O1CN01tsyiHF1yMonnkVA2n_!!3846006565.jpg" style="width: 60px; height: 60px; margin: 2px 0px; display: inline-block;"></td><td class="show" style="text-align: left; padding: 0px 5px; border-top: 1px solid rgb(158, 158, 158);"> </td><td class="show" style="text-align: left; border-top: 1px solid rgb(158, 158, 158);">1</td><td class="show " style="text-align: center; border-top: 1px solid rgb(158, 158, 158);"></td><td class="show " style="text-align: right; border-top: 1px solid rgb(158, 158, 158);">0.01</td></tr></tbody></table></div>`
             },
             mounted(){
               console.log('mounted');
               CLodopFuncs.init();
               setTimeout(() => {
                  this.getPrint();
               }, 1000);
               
             },
             methods: {
               getPrint(){
                    //获得组件
                    let CLODOP = CLodopFuncs.getLodop();
                    if (typeof CLODOP !== 'object') throw CLODOP;
                    //获得打印机数组
                    let printerList = [];
                    let printerCount = CLODOP.GET_PRINTER_COUNT();
                    printerList.push({
                        "index": -1,
                        "value": '---默认打印机---',
                        "label": '---默认打印机---'
                    });
                    if (printerCount > 0) {
                        for (let i = 0; i < printerCount; i++) {
                            let _obj = {};
                            _obj["index"] = i;
                            _obj["value"] = CLODOP.GET_PRINTER_NAME(i);
                            _obj["label"] = _obj["value"];
                            printerList.push(_obj);
                        }

                        this.printerList = printerList;
                        this.printer = printerList[0].label;
                    }
               },
                handlePrint() {
                    console.log('handlePrint');
                    let CLodopPrintHelp = new CLodopPrintClass();
                    let isPreview = this.$data.radio==1;
                    let currentPrinter = this.$data.printer;
                    let data={
                        width: 210,
                        height: 297,
                        html: this.$data.printHtml,
                        };
                        CLodopPrintHelp.printPicking(isPreview, currentPrinter, data, function (res) {
                            console.log('afterPrint',res)
                        });
                },
             },
            
             watch:{
               
             }
           })
           console.log('after mounted');
        </script>
</body>
</html>